<template>
	<view class="uni-date">
		<view class="uni-date-editor" @click="show">
			<slot>
				<view
					class="uni-date-editor--x"
					:class="{
						'uni-date-editor--x__disabled': disabled,
						'uni-date-x--border': border,
					}"
				>
					<view v-if="!isRange" class="uni-date-x uni-date-single">
						<uni-icons
							type="calendar"
							color="#c0c4cc"
							size="22"
						></uni-icons>
						<input
							class="uni-date__x-input"
							type="text"
							v-model="singleVal"
							:placeholder="singlePlaceholderText"
							:disabled="true"
						/>
					</view>
					<view v-else class="uni-date-x uni-date-range">
						<uni-icons
							type="calendar"
							color="#c0c4cc"
							size="22"
						></uni-icons>
						<input
							class="uni-date__x-input t-c"
							type="text"
							v-model="range.startDate"
							:placeholder="startPlaceholderText"
							:disabled="true"
						/>
						<slot>
							<view class="">{{ rangeSeparator }}</view>
						</slot>
						<input
							class="uni-date__x-input t-c"
							type="text"
							v-model="range.endDate"
							:placeholder="endPlaceholderText"
							:disabled="true"
						/>
					</view>
					<view
						v-if="showClearIcon"
						class="uni-date__icon-clear"
						@click.stop="clear"
					>
						<uni-icons
							type="clear"
							color="#c0c4cc"
							size="24"
						></uni-icons>
					</view>
				</view>
			</slot>
		</view>

		<view v-show="popup" class="uni-date-mask" @click="close"></view>
		<view
			v-if="!isPhone"
			ref="datePicker"
			v-show="popup"
			class="uni-date-picker__container"
		>
			<view v-if="!isRange" class="uni-date-single--x" :style="popover">
				<view class="uni-popper__arrow"></view>
				<view v-if="hasTime" class="uni-date-changed popup-x-header">
					<input
						class="uni-date__input t-c"
						type="text"
						v-model="tempSingleDate"
						:placeholder="selectDateText"
					/>
					<time-picker
						type="time"
						v-model="time"
						:border="false"
						:disabled="!tempSingleDate"
						:start="reactStartTime"
						:end="reactEndTime"
						:hideSecond="hideSecond"
						style="width: 100%"
					>
						<input
							class="uni-date__input t-c"
							type="text"
							v-model="time"
							:placeholder="selectTimeText"
							:disabled="!tempSingleDate"
						/>
					</time-picker>
				</view>
				<calendar
					ref="pcSingle"
					:showMonth="false"
					:start-date="caleRange.startDate"
					:end-date="caleRange.endDate"
					:date="defSingleDate"
					@change="singleChange"
					style="padding: 0 8px"
				/>
				<view v-if="hasTime" class="popup-x-footer">
					<!-- <text class="">此刻</text> -->
					<text class="confirm" @click="confirmSingleChange">{{
						okText
					}}</text>
				</view>
				<view class="uni-date-popper__arrow"></view>
			</view>

			<view v-else class="uni-date-range--x" :style="popover">
				<view class="uni-popper__arrow"></view>
				<view v-if="hasTime" class="popup-x-header uni-date-changed">
					<view class="popup-x-header--datetime">
						<input
							class="uni-date__input uni-date-range__input"
							type="text"
							v-model="tempRange.startDate"
							:placeholder="startDateText"
						/>
						<time-picker
							type="time"
							v-model="tempRange.startTime"
							:start="reactStartTime"
							:border="false"
							:disabled="!tempRange.startDate"
							:hideSecond="hideSecond"
						>
							<input
								class="uni-date__input uni-date-range__input"
								type="text"
								v-model="tempRange.startTime"
								:placeholder="startTimeText"
								:disabled="!tempRange.startDate"
							/>
						</time-picker>
					</view>
					<uni-icons
						type="arrowthinright"
						color="#999"
						style="line-height: 40px"
					></uni-icons>
					<view class="popup-x-header--datetime">
						<input
							class="uni-date__input uni-date-range__input"
							type="text"
							v-model="tempRange.endDate"
							:placeholder="endDateText"
						/>
						<time-picker
							type="time"
							v-model="tempRange.endTime"
							:end="reactEndTime"
							:border="false"
							:disabled="!tempRange.endDate"
							:hideSecond="hideSecond"
						>
							<input
								class="uni-date__input uni-date-range__input"
								type="text"
								v-model="tempRange.endTime"
								:placeholder="endTimeText"
								:disabled="!tempRange.endDate"
							/>
						</time-picker>
					</view>
				</view>
				<view class="popup-x-body">
					<calendar
						ref="left"
						:showMonth="false"
						:start-date="caleRange.startDate"
						:end-date="caleRange.endDate"
						:range="true"
						@change="leftChange"
						:pleStatus="endMultipleStatus"
						@firstEnterCale="updateRightCale"
						@monthSwitch="leftMonthSwitch"
						style="padding: 0 8px"
					/>
					<calendar
						ref="right"
						:showMonth="false"
						:start-date="caleRange.startDate"
						:end-date="caleRange.endDate"
						:range="true"
						@change="rightChange"
						:pleStatus="startMultipleStatus"
						@firstEnterCale="updateLeftCale"
						@monthSwitch="rightMonthSwitch"
						style="padding: 0 8px; border-left: 1px solid #f1f1f1"
					/>
				</view>
				<view v-if="hasTime" class="popup-x-footer">
					<text class="" @click="clear">{{ clearText }}</text>
					<text class="confirm" @click="confirmRangeChange">{{
						okText
					}}</text>
				</view>
			</view>
		</view>
		<calendar
			v-show="isPhone"
			ref="mobile"
			:clearDate="false"
			:date="defSingleDate"
			:defTime="reactMobDefTime"
			:start-date="caleRange.startDate"
			:end-date="caleRange.endDate"
			:selectableTimes="mobSelectableTime"
			:pleStatus="endMultipleStatus"
			:showMonth="false"
			:range="isRange"
			:typeHasTime="hasTime"
			:insert="false"
			:hideSecond="hideSecond"
			@confirm="mobileChange"
		/>
	</view>
</template>
<script>
/**
 * DatetimePicker 时间选择器
 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
 * @property {String} type 选择器类型
 * @property {String|Number|Array|Date} value 绑定值
 * @property {String} placeholder 单选择时的占位内容
 * @property {String} start 起始时间
 * @property {String} end 终止时间
 * @property {String} start-placeholder 范围选择时开始日期的占位内容
 * @property {String} end-placeholder 范围选择时结束日期的占位内容
 * @property {String} range-separator 选择范围时的分隔符
 * @property {Boolean} border = [true|false] 是否有边框
 * @property {Boolean} disabled = [true|false] 是否禁用
 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
 * @event {Function} change 确定日期时触发的事件
 * @event {Function} show 打开弹出层
 * @event {Function} close 关闭弹出层
 * @event {Function} clear 清除上次选中的状态和值
 **/
import calendar from './calendar.vue'
import timePicker from './time-picker.vue'
import { initVueI18n } from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)

export default {
	name: 'UniDatetimePicker',
	options: {
		virtualHost: true,
	},
	components: {
		calendar,
		timePicker,
	},
	inject: {
		form: {
			from: 'uniForm',
			default: null,
		},
		formItem: {
			from: 'uniFormItem',
			default: null,
		},
	},
	data() {
		return {
			isRange: false,
			hasTime: false,
			mobileRange: false,
			// 单选
			singleVal: '',
			tempSingleDate: '',
			defSingleDate: '',
			time: '',
			// 范围选
			caleRange: {
				startDate: '',
				startTime: '',
				endDate: '',
				endTime: '',
			},
			range: {
				startDate: '',
				// startTime: '',
				endDate: '',
				// endTime: ''
			},
			tempRange: {
				startDate: '',
				startTime: '',
				endDate: '',
				endTime: '',
			},
			// 左右日历同步数据
			startMultipleStatus: {
				before: '',
				after: '',
				data: [],
				fulldate: '',
			},
			endMultipleStatus: {
				before: '',
				after: '',
				data: [],
				fulldate: '',
			},
			visible: false,
			popup: false,
			popover: null,
			isEmitValue: false,
			isPhone: false,
			isFirstShow: true,
		}
	},
	props: {
		type: {
			type: String,
			default: 'datetime',
		},
		value: {
			type: [String, Number, Array, Date],
			default: '',
		},
		modelValue: {
			type: [String, Number, Array, Date],
			default: '',
		},
		start: {
			type: [Number, String],
			default: '',
		},
		end: {
			type: [Number, String],
			default: '',
		},
		returnType: {
			type: String,
			default: 'string',
		},
		placeholder: {
			type: String,
			default: '',
		},
		startPlaceholder: {
			type: String,
			default: '',
		},
		endPlaceholder: {
			type: String,
			default: '',
		},
		rangeSeparator: {
			type: String,
			default: '-',
		},
		border: {
			type: [Boolean],
			default: true,
		},
		disabled: {
			type: [Boolean],
			default: false,
		},
		clearIcon: {
			type: [Boolean],
			default: true,
		},
		hideSecond: {
			type: [Boolean],
			default: false,
		},
	},
	watch: {
		type: {
			immediate: true,
			handler(newVal, oldVal) {
				if (newVal.indexOf('time') !== -1) {
					this.hasTime = true
				} else {
					this.hasTime = false
				}
				if (newVal.indexOf('range') !== -1) {
					this.isRange = true
				} else {
					this.isRange = false
				}
			},
		},
		// #ifndef VUE3
		value: {
			immediate: true,
			handler(newVal, oldVal) {
				if (this.isEmitValue) {
					this.isEmitValue = false
					return
				}
				this.initPicker(newVal)
			},
		},
		// #endif
		// #ifdef VUE3
		modelValue: {
			immediate: true,
			handler(newVal, oldVal) {
				if (this.isEmitValue) {
					this.isEmitValue = false
					return
				}
				this.initPicker(newVal)
			},
		},
		// #endif
		start: {
			immediate: true,
			handler(newVal, oldVal) {
				if (!newVal) return
				const { defDate, defTime } = this.parseDate(newVal)
				this.caleRange.startDate = defDate
				if (this.hasTime) {
					this.caleRange.startTime = defTime
				}
			},
		},
		end: {
			immediate: true,
			handler(newVal, oldVal) {
				if (!newVal) return
				const { defDate, defTime } = this.parseDate(newVal)
				this.caleRange.endDate = defDate
				if (this.hasTime) {
					this.caleRange.endTime = defTime
				}
			},
		},
	},
	computed: {
		reactStartTime() {
			const activeDate = this.isRange
				? this.tempRange.startDate
				: this.tempSingleDate
			const res =
				activeDate === this.caleRange.startDate
					? this.caleRange.startTime
					: ''
			return res
		},
		reactEndTime() {
			const activeDate = this.isRange
				? this.tempRange.endDate
				: this.tempSingleDate
			const res =
				activeDate === this.caleRange.endDate
					? this.caleRange.endTime
					: ''
			return res
		},
		reactMobDefTime() {
			const times = {
				start: this.tempRange.startTime,
				end: this.tempRange.endTime,
			}
			return this.isRange ? times : this.time
		},
		mobSelectableTime() {
			return {
				start: this.caleRange.startTime,
				end: this.caleRange.endTime,
			}
		},
		datePopupWidth() {
			// todo
			return this.isRange ? 653 : 301
		},

		/**
		 * for i18n
		 */
		singlePlaceholderText() {
			return (
				this.placeholder ||
				(this.type === 'date'
					? this.selectDateText
					: t('uni-datetime-picker.selectDateTime'))
			)
		},
		startPlaceholderText() {
			return this.startPlaceholder || this.startDateText
		},
		endPlaceholderText() {
			return this.endPlaceholder || this.endDateText
		},
		selectDateText() {
			return t('uni-datetime-picker.selectDate')
		},
		selectTimeText() {
			return t('uni-datetime-picker.selectTime')
		},
		startDateText() {
			return this.startPlaceholder || t('uni-datetime-picker.startDate')
		},
		startTimeText() {
			return t('uni-datetime-picker.startTime')
		},
		endDateText() {
			return this.endPlaceholder || t('uni-datetime-picker.endDate')
		},
		endTimeText() {
			return t('uni-datetime-picker.endTime')
		},
		okText() {
			return t('uni-datetime-picker.ok')
		},
		clearText() {
			return t('uni-datetime-picker.clear')
		},
		showClearIcon() {
			const { clearIcon, disabled, singleVal, range } = this
			const bool =
				clearIcon &&
				!disabled &&
				(singleVal || (range.startDate && range.endDate))
			return bool
		},
	},
	created() {
		// if (this.form && this.formItem) {
		// 	this.$watch('formItem.errMsg', (newVal) => {
		// 		this.localMsg = newVal
		// 	})
		// }
	},
	mounted() {
		this.platform()
	},
	methods: {
		initPicker(newVal) {
			if (!newVal || (Array.isArray(newVal) && !newVal.length)) {
				this.$nextTick(() => {
					this.clear(false)
				})
				return
			}
			if (!Array.isArray(newVal) && !this.isRange) {
				const { defDate, defTime } = this.parseDate(newVal)
				this.singleVal = defDate
				this.tempSingleDate = defDate
				this.defSingleDate = defDate
				if (this.hasTime) {
					this.singleVal = defDate + ' ' + defTime
					this.time = defTime
				}
			} else {
				const [before, after] = newVal
				if (!before && !after) return
				const defBefore = this.parseDate(before)
				const defAfter = this.parseDate(after)
				const startDate = defBefore.defDate
				const endDate = defAfter.defDate
				this.range.startDate = this.tempRange.startDate = startDate
				this.range.endDate = this.tempRange.endDate = endDate

				if (this.hasTime) {
					this.range.startDate =
						defBefore.defDate + ' ' + defBefore.defTime
					this.range.endDate =
						defAfter.defDate + ' ' + defAfter.defTime
					this.tempRange.startTime = defBefore.defTime
					this.tempRange.endTime = defAfter.defTime
				}
				const defaultRange = {
					before: defBefore.defDate,
					after: defAfter.defDate,
				}
				this.startMultipleStatus = Object.assign(
					{},
					this.startMultipleStatus,
					defaultRange,
					{
						which: 'right',
					}
				)
				this.endMultipleStatus = Object.assign(
					{},
					this.endMultipleStatus,
					defaultRange,
					{
						which: 'left',
					}
				)
			}
		},
		updateLeftCale(e) {
			const left = this.$refs.left
			// 设置范围选
			left.cale.setHoverMultiple(e.after)
			left.setDate(this.$refs.left.nowDate.fullDate)
		},
		updateRightCale(e) {
			const right = this.$refs.right
			// 设置范围选
			right.cale.setHoverMultiple(e.after)
			right.setDate(this.$refs.right.nowDate.fullDate)
		},
		platform() {
			const systemInfo = uni.getSystemInfoSync()
			this.isPhone = systemInfo.windowWidth <= 500
			this.windowWidth = systemInfo.windowWidth
		},
		show(event) {
			if (this.disabled) {
				return
			}
			this.platform()
			if (this.isPhone) {
				this.$refs.mobile.open()
				return
			}
			this.popover = {
				top: '10px',
			}
			const dateEditor = uni
				.createSelectorQuery()
				.in(this)
				.select('.uni-date-editor')
			dateEditor
				.boundingClientRect((rect) => {
					if (this.windowWidth - rect.left < this.datePopupWidth) {
						this.popover.right = 0
					}
				})
				.exec()
			setTimeout(() => {
				this.popup = !this.popup
				if (!this.isPhone && this.isRange && this.isFirstShow) {
					this.isFirstShow = false
					const { startDate, endDate } = this.range
					if (startDate && endDate) {
						if (this.diffDate(startDate, endDate) < 30) {
							this.$refs.right.next()
						}
					} else {
						this.$refs.right.next()
						this.$refs.right.cale.lastHover = false
					}
				}
			}, 50)
		},

		close() {
			setTimeout(() => {
				this.popup = false
				this.$emit('maskClick', this.value)
			}, 20)
		},
		setEmit(value) {
			if (this.returnType === 'timestamp' || this.returnType === 'date') {
				if (!Array.isArray(value)) {
					if (!this.hasTime) {
						value = value + ' ' + '00:00:00'
					}
					value = this.createTimestamp(value)
					if (this.returnType === 'date') {
						value = new Date(value)
					}
				} else {
					if (!this.hasTime) {
						value[0] = value[0] + ' ' + '00:00:00'
						value[1] = value[1] + ' ' + '00:00:00'
					}
					value[0] = this.createTimestamp(value[0])
					value[1] = this.createTimestamp(value[1])
					if (this.returnType === 'date') {
						value[0] = new Date(value[0])
						value[1] = new Date(value[1])
					}
				}
			}

			this.$emit('change', value)
			this.$emit('input', value)
			this.$emit('update:modelValue', value)
			this.isEmitValue = true
		},
		createTimestamp(date) {
			date = this.fixIosDateFormat(date)
			return Date.parse(new Date(date))
		},
		singleChange(e) {
			this.tempSingleDate = e.fulldate
			if (this.hasTime) return
			this.confirmSingleChange()
		},

		confirmSingleChange() {
			if (!this.tempSingleDate) {
				this.popup = false
				return
			}
			if (this.hasTime) {
				this.singleVal =
					this.tempSingleDate +
					' ' +
					(this.time ? this.time : '00:00:00')
			} else {
				this.singleVal = this.tempSingleDate
			}
			this.setEmit(this.singleVal)
			this.popup = false
		},

		leftChange(e) {
			const { before, after } = e.range
			this.rangeChange(before, after)
			const obj = {
				before: e.range.before,
				after: e.range.after,
				data: e.range.data,
				fulldate: e.fulldate,
			}
			this.startMultipleStatus = Object.assign(
				{},
				this.startMultipleStatus,
				obj
			)
		},

		rightChange(e) {
			const { before, after } = e.range
			this.rangeChange(before, after)
			const obj = {
				before: e.range.before,
				after: e.range.after,
				data: e.range.data,
				fulldate: e.fulldate,
			}
			this.endMultipleStatus = Object.assign(
				{},
				this.endMultipleStatus,
				obj
			)
		},

		mobileChange(e) {
			if (this.isRange) {
				const { before, after } = e.range
				this.handleStartAndEnd(before, after, true)
				if (this.hasTime) {
					const { startTime, endTime } = e.timeRange
					this.tempRange.startTime = startTime
					this.tempRange.endTime = endTime
				}
				this.confirmRangeChange()
			} else {
				if (this.hasTime) {
					this.singleVal = e.fulldate + ' ' + e.time
				} else {
					this.singleVal = e.fulldate
				}
				this.setEmit(this.singleVal)
			}
			this.$refs.mobile.close()
		},

		rangeChange(before, after) {
			if (!(before && after)) return
			this.handleStartAndEnd(before, after, true)
			if (this.hasTime) return
			this.confirmRangeChange()
		},

		confirmRangeChange() {
			if (!this.tempRange.startDate && !this.tempRange.endDate) {
				this.popup = false
				return
			}
			let start, end
			if (!this.hasTime) {
				start = this.range.startDate = this.tempRange.startDate
				end = this.range.endDate = this.tempRange.endDate
			} else {
				start = this.range.startDate =
					this.tempRange.startDate +
					' ' +
					(this.tempRange.startTime
						? this.tempRange.startTime
						: '00:00:00')
				end = this.range.endDate =
					this.tempRange.endDate +
					' ' +
					(this.tempRange.endTime
						? this.tempRange.endTime
						: '00:00:00')
			}
			const displayRange = [start, end]
			this.setEmit(displayRange)
			this.popup = false
		},

		handleStartAndEnd(before, after, temp = false) {
			if (!(before && after)) return
			const type = temp ? 'tempRange' : 'range'
			if (this.dateCompare(before, after)) {
				this[type].startDate = before
				this[type].endDate = after
			} else {
				this[type].startDate = after
				this[type].endDate = before
			}
		},

		/**
		 * 比较时间大小
		 */
		dateCompare(startDate, endDate) {
			// 计算截止时间
			startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
			// 计算详细项的截止时间
			endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
			if (startDate <= endDate) {
				return true
			} else {
				return false
			}
		},

		/**
		 * 比较时间差
		 */
		diffDate(startDate, endDate) {
			// 计算截止时间
			startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
			// 计算详细项的截止时间
			endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
			const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
			return Math.abs(diff)
		},

		clear(needEmit = true) {
			if (!this.isRange) {
				this.singleVal = ''
				this.tempSingleDate = ''
				this.time = ''
				if (this.isPhone) {
					this.$refs.mobile && this.$refs.mobile.clearCalender()
				} else {
					this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
				}
				if (needEmit) {
					// 校验规则
					// if(this.form  && this.formItem){
					// 	const {
					// 		validateTrigger
					// 	} = this.form
					// 	if (validateTrigger === 'blur') {
					// 		this.formItem.onFieldChange()
					// 	}
					// }
					this.$emit('change', '')
					this.$emit('input', '')
					this.$emit('update:modelValue', '')
				}
			} else {
				this.range.startDate = ''
				this.range.endDate = ''
				this.tempRange.startDate = ''
				this.tempRange.startTime = ''
				this.tempRange.endDate = ''
				this.tempRange.endTime = ''
				if (this.isPhone) {
					this.$refs.mobile && this.$refs.mobile.clearCalender()
				} else {
					this.$refs.left && this.$refs.left.clearCalender()
					this.$refs.right && this.$refs.right.clearCalender()
					this.$refs.right && this.$refs.right.next()
				}
				if (needEmit) {
					this.$emit('change', [])
					this.$emit('input', [])
					this.$emit('update:modelValue', [])
				}
			}
		},

		parseDate(date) {
			date = this.fixIosDateFormat(date)
			const defVal = new Date(date)
			const year = defVal.getFullYear()
			const month = defVal.getMonth() + 1
			const day = defVal.getDate()
			const hour = defVal.getHours()
			const minute = defVal.getMinutes()
			const second = defVal.getSeconds()
			const defDate =
				year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
			const defTime =
				this.lessTen(hour) +
				':' +
				this.lessTen(minute) +
				(this.hideSecond ? '' : ':' + this.lessTen(second))
			return {
				defDate,
				defTime,
			}
		},

		lessTen(item) {
			return item < 10 ? '0' + item : item
		},

		//兼容 iOS、safari 日期格式
		fixIosDateFormat(value) {
			if (typeof value === 'string') {
				value = value.replace(/-/g, '/')
			}
			return value
		},

		leftMonthSwitch(e) {
			// console.log('leftMonthSwitch 返回:', e)
		},
		rightMonthSwitch(e) {
			// console.log('rightMonthSwitch 返回:', e)
		},
	},
}
</script>

<style>
.uni-date {
	/* #ifndef APP-NVUE */
	width: 100%;
	/* #endif */
	flex: 1;
}
.uni-date-x {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 4px;
	background-color: #fff;
	color: #666;
	font-size: 14px;
	flex: 1;
}

.uni-date-x--border {
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
}

.uni-date-editor--x {
	display: flex;
	align-items: center;
	position: relative;
	display: flex;
	flex-direction: row;
}

.uni-date-editor--x .uni-date__icon-clear {
	padding: 0 5px;
	display: flex;
	align-items: center;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-date__x-input {
	padding: 0 8px;
	/* #ifndef APP-NVUE */
	width: auto;
	/* #endif */
	position: relative;
	overflow: hidden;
	flex: 1;
	line-height: 1;
	font-size: 14px;
	height: 35px;
}

.t-c {
	text-align: center;
}

.uni-date__input {
	height: 40px;
	width: 100%;
	line-height: 40px;
	font-size: 14px;
}

.uni-date-range__input {
	text-align: center;
	max-width: 142px;
}

.uni-date-picker__container {
	position: relative;
	/* 		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		z-index: 996;
		font-size: 14px; */
}

.uni-date-mask {
	position: fixed;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0);
	transition-duration: 0.3s;
	z-index: 996;
}

.uni-date-single--x {
	/* padding: 0 8px; */
	background-color: #fff;
	position: absolute;
	top: 0;
	z-index: 999;
	border: 1px solid #ebeef5;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.uni-date-range--x {
	/* padding: 0 8px; */
	background-color: #fff;
	position: absolute;
	top: 0;
	z-index: 999;
	border: 1px solid #ebeef5;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.uni-date-editor--x__disabled {
	opacity: 0.4;
	cursor: default;
}

.uni-date-editor--logo {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* 添加时间 */
.popup-x-header {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	/* justify-content: space-between; */
}

.popup-x-header--datetime {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex: 1;
}

.popup-x-body {
	display: flex;
}

.popup-x-footer {
	padding: 0 15px;
	border-top-color: #f1f1f1;
	border-top-style: solid;
	border-top-width: 1px;
	/* background-color: #fff; */
	line-height: 40px;
	text-align: right;
	color: #666;
}

.popup-x-footer text:hover {
	color: #007aff;
	cursor: pointer;
	opacity: 0.8;
}

.popup-x-footer .confirm {
	margin-left: 20px;
	color: #007aff;
}

.uni-date-changed {
	/* background-color: #fff; */
	text-align: center;
	color: #333;
	border-bottom-color: #f1f1f1;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	/* padding: 0 50px; */
}

.uni-date-changed--time text {
	/* padding: 0 20px; */
	height: 50px;
	line-height: 50px;
}

.uni-date-changed .uni-date-changed--time {
	/* display: flex; */
	flex: 1;
}

.uni-date-changed--time-date {
	color: #333;
	opacity: 0.6;
}

.mr-50 {
	margin-right: 50px;
}

/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
.uni-popper__arrow,
.uni-popper__arrow::after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
}

.uni-popper__arrow {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	top: -6px;
	left: 10%;
	margin-right: 3px;
	border-top-width: 0;
	border-bottom-color: #ebeef5;
}

.uni-popper__arrow::after {
	content: ' ';
	top: 1px;
	margin-left: -6px;
	border-top-width: 0;
	border-bottom-color: #fff;
}
</style>
